<template>
  <div>
    <div class="background"></div>
    <div class="imageDiv">
      <img v-if="status==true" :src="detailstList.topImage.url">
    </div>
    <section v-if="status==true" class="content">
      <h3 v-text="detailstList.name" id="Night"></h3>
      <p v-text="'￥'+ detailstList.price+'.00'" id="price"></p>
      <p v-text="'地址'+detailstList.address" id="address"></p>
      <div style="height: 1vw;background-color: rgb(247, 244, 240);"></div>
      <div v-for="(detailstInfo ,index) in detailstList.resource" :key="index">
        <div :class="{title:detailstInfo.isSubTitle == 1 ? true:false}" id="titles">
          <p v-if="detailstInfo.name==null">{{detailstInfo.txt}}</p>
        </div>
        <div class="topImage">
          <img v-if="detailstInfo.txt==null" :src="detailstInfo.url" alt>
        </div>
        <div v-if="detailstInfo.txt==null && detailstInfo.name==null"></div>
      </div>
      <div id="hint">
        <span>————————</span>
        <span
          style="color:black"
        >&#x3000;&#x3000;&#x3000;&#x3000;温馨提示&#x3000;&#x3000;&#x3000;&#x3000;</span>
        <span>————————</span>
      </div>
      <pre v-if="status==true">{{detailstList.reminder}}</pre>

      <div style="height: 1vw;background-color: rgb(247, 244, 240)"></div>
      <div>
        <div style="width:80%;margin:0 auto">
          <div style="padding-top:30px">评论</div>
          <div style="height:1px;background-color: #979797;width:100%"></div>
          <div class="comment-box">
            <textarea name="commentText" id="commentText" cols rows required placeholder="说点什么呢..."></textarea>
          </div>
          <div class="comment-op-panel">
            <div class="comment-op-image" style="position: relative;">
              <span class="fa fa-plus"></span>
              <span>加一张图片</span>
              <input
                type="file"
                style="position:absolute;z-index: 10;cursor: pointer;right: 0;top: 0;width: 100%; height: 100%;-webkit-opacity: 0;"
              >
            </div>
            <div class="comment-op-send">发表评论</div>
          </div>
          <div class="comment-op-total">
            <img src="http://www.songguolife.com/nuts/images/talking_area.png" alt>
            <span>共0条 | 查看全部</span>
          </div>
        </div>
      </div>
      <div class="weixinfooter">
        <img src="http://image.songguolife.com//weixinfooter@2x.png?imageslim" alt>
      </div>
    </section>

    <div class="navBar">
      <div class="nav">
        <router-link :to="'/activityPay/'+activityId">
          <div class="nav-text">我要参加</div>
        </router-link>
        <div class="favBox">
          <img src="http://www.songguolife.com/nuts/images/share_like.png" alt>0人喜欢
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import axios from "axios";

  export default {
    data: function () {
      return {
        detailstList: [],
        status: false,
      };
    },
    props: ["activityId"],
    mounted() {
      this.detailst();
    },
    methods: {
      detailst: function () {
        var that = this;
        var API_Proxy = "https://bird.ioliu.cn/v1/?url=";
        axios.get(
          API_Proxy +
          "http://www.songguolife.com/api/activity/" +
          this.activityId
        )
          .then(
            function (value) {
              that.detailstList = value.data;
              that.status = true;
              that.activityPay = value.data.items
            },
            function (err) {
              console.log(err);
            }
          );
      },
    }
  };
</script>
<style scoped>
  .background {
    width: 85vw;
    height: 8vw;
    background-color: rgb(247, 244, 240);
    margin: 0 auto;
  }

  .content {
    margin: 0 auto;
    width: 70vw;
  }

  .imageDiv {
    padding-top: 50px;
    text-align: center;
  }

  .imageDiv img {
    width: 75vw;
    height: 30vw;
    text-align: center;
  }

  .topImage {
    width: 70vw;
  }

  .topImage img {
    width: 70vw;
  }

  #hint {
    font-size: 16px;
    color: #cccccc;
    text-align: center;
  }

  pre {
    border: none;
    background-color: transparent;
  }

  .title {
    text-align: center;
  }

  #titles {
    padding-top: 20px;
    /* background-color: black; */
  }

  .comment-box {
    margin-top: 30px;
  }

  .comment-box textarea {
    background-color: #f7f4f0;
    border: 1px solid #ded8d0;
    border-radius: 2px;
    overflow: auto;
    width: 100%;
    height: 140px;
  }

  .comment-op-panel {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
  }

  .comment-op-image {
    background-color: #e2e2e2;
    border-radius: 2px;
    font-size: 18px;
    padding: 10px 20px;
    text-align: center;
    margin: 0;
    width: 150px;
  }

  .comment-op-send {
    background-color: #ff5722;
    color: #fff;
    border-radius: 2px;
    width: 140px;
    font-size: 18px;
    padding: 10px 26px;
    text-align: center;
  }

  .comment-op-total {
    padding-top: 20px;
    padding-bottom: 40px;
  }

  .comment-op-total img {
    width: 44px;
    height: 44px;
  }

  .comment-op-total span {
    line-height: 44px;
    color: #ff5722;
  }

  .weixinfooter {
    width: 70vw;
  }

  .weixinfooter img {
    width: 70vw;
  }

  .navBar {
    font-size: 18px;
    position: fixed;
    bottom: 0;
    background-color: #fff;
    width: 100vw;
  }

  .nav {
    width: 80vw;
    margin: 0 auto;
  }

  .nav-text {
    background-color: #f88c5f;
    width: 20vw;
    height: 6vw;
    float: right;
    text-align: center;
    color: #fff;
    line-height: 6vw;
  }

  .favBox {
    float: right;
    font-size: 12px;
    color: #888;
    width: 20vw;
    height: 6vw;
    line-height: 6vw;
  }
  .favBox img {
    width: 2vw;
  }
</style>
